<template>
  <div v-show="visible" class="context-menu" :style="{ top: y + 'px', left: x + 'px' }">
    <ul>
      <!-- 文件夹右键菜单 -->
      <template v-if="contextType === 'folder'">
        <li @click="handleRenameFolder">
          <i class="el-icon-edit-outline"></i> 重命名
        </li>
        <li @click="handleDeleteFolder"><i class="el-icon-delete"></i> 删除</li>
        <li @click="handleSetExpiry">
          <i class="el-icon-time"></i> 设置有效期
        </li>
      </template>

      <!-- 文件右键菜单 -->
      <template v-else-if="contextType === 'file'">
        <li @click="handleEdit"><i class="el-icon-edit"></i> 编辑</li>
        <li @click="handleOpen"><i class="el-icon-view"></i> 查看</li>
        <li @click="handleRenameFile">
          <i class="el-icon-edit-outline"></i> 重命名
        </li>
        <li @click="handleDeleteFile"><i class="el-icon-delete"></i> 删除</li>
        <li @click="handleVersion">
          <i class="el-icon-document"></i> 版本历史
        </li>
      </template>

      <!-- 空白处右键菜单 -->
      <template v-else>
        <li @click="handleNewFolder">
          <i class="el-icon-folder-add"></i> 新建文件夹
        </li>
        <li @click="() => handleUploadFile()">
          <i class="el-icon-upload"></i> 上传文件
        </li>
        <li @click="handleRefresh"><i class="el-icon-refresh"></i> 刷新</li>
      </template>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      contextType: null, // 'folder'/'file'/null(空白处)
      visible: false,
      x: 0,
      y: 0,
      isFileContext: false, // 是否是文件卡片右键菜单
    };
  },
  methods: {
    show(x, y, contextType) {
      this.contextType = ['folder', 'file'].includes(contextType) ? contextType : null;
      this.x = x;
      this.y = y;
      this.visible = true;
    },

    hide() {
      this.visible = false;
    },

    
    handleRenameFile() {
      this.$emit("rename-file",this.contextType)
      this.hide();
    },

    handleRenameFolder() {
      this.$emit("rename-folder", this.contextType);
      this.hide();
    },

    handleDeleteFile() {
      this.$emit("delete-file", this.contextType);
      this.hide();
    },

    handleDeleteFolder() {
      this.$emit("delete-folder", this.contextType);
      this.hide();
    },

    // 文件夹专用
    // 设置有效期
    handleSetExpiry() {
      this.$emit("set-expiry", this.contextType);
      this.hide();
    },

    // 文件专用
    handleEdit() {
      this.$emit("edit");
      this.hide();
    },

    handleOpen() {
      this.$emit("open");
      this.hide();
    },
    handleVersion() {
      this.$emit("version");
      this.hide();
    },
    // 空白处专用
    handleNewFolder() {
      this.$emit("new-folder");
      this.hide();
    },
    handleUploadFile() {
      this.$emit("upload-file");
      this.hide();
    },
    handleRefresh() {
      this.$emit("refresh-all");
      this.hide();
    },
  },
};
</script>

<style scoped>

.context-menu {
  z-index: 9999;
  position: fixed;
  background-color: #fff;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  z-index: 1000;
  min-width: 120px;
}

.context-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.context-menu ul li {
  padding: 8px 16px;
  cursor: pointer;
  font-size: 14px;
  color: #606266;
  display: flex;
  align-items: center;
}

.context-menu ul li:hover {
  background-color: #f5f7fa;
}

.context-menu ul li i {
  margin-right: 8px;
}
</style>
